<!DOCTYPE html>
<html>
<head>
	<title>demo for pick color</title>
	<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
	<script type="text/javascript">
		var img = new Image();
		img.src = "images/back.jpg";
		$(img).load(function(){
			var cv = $("#cv");
			var w = cv.width(),h = cv.height();
			cv.get(0).getContext("2d").drawImage(img,0,0,w,h);
		});

		$(window).ready(function(){
			$("#cv").click(function(e){
				var cv_offset = $(this).offset();
				var x = Math.floor(e.pageX - cv_offset.left);
				var y = Math.floor(e.pageY - cv_offset.top);
				var data = $(this).get(0).getContext("2d").getImageData(x,y,1,1);
				var pixel = data.data;
				var px_color = "rgba("+pixel[0]+","+pixel[1]+","+pixel[2]+","+pixel[3]+")";
				$("body").css("backgroundColor",px_color);
			});
		});
	</script>
	<style type="text/css">
	#cv{
		border: 3px solid black;
	}
	</style>
</head>
<body>
	<h1>Demo for Pick Color</h1>
	<h3 style="color:red;">click picture to pick color</h3>
	<canvas id="cv" width="800" height="800"></canvas>
</body>
</html>